﻿@{
    ViewBag.Title = "木知春冲印";
    Layout = "~/Views/Home/TemplateLayout.cshtml";
}
@section head_js
{
    <link rel="stylesheet" href="~/style/jquery.Jcrop.min.css">
    <script src="~/Scripts/jquery.Jcrop.min.js"></script>
    <script>
        var objOrderDetails;
        var jcrop_api;
        var serverid=getUrlParam("s");
        var index=null;
        var currobj;
        var maxWidth=500;
        var maxHeight=640;
        var rotate=0;
        //imgareaselect 控件
        $(function () {
            maxWidth=document.documentElement.clientWidth ;//document.body.clientWidth;
            maxHeight=document.documentElement.clientHeight-100;

            objOrderDetails=@Html.Raw(ViewBag.order);
            if(objOrderDetails.type=="拍立得")
                $("#divRotate").show();
            else
                $("#divRotate").hide();
            if(serverid!=null && serverid!=undefined && serverid!="")
            {
                currobj=findByServerid(objOrderDetails.images,serverid,index);
            }
            else
            {
                currobj=findByIndex(objOrderDetails.images,0);
                serverid=currobj.serverid;
            }
            initJcrop();

            function initJcrop()//{{{
            {
                jcrop_api= $.Jcrop('#cropbox',{
                    allowSelect: false,//允许新选框
                    allowResize: false,//允许选框缩放
                    maxSize:[maxWidth,maxHeight],
                    aspectRatio: objOrderDetails.aspectRatio//宽高比
                });
            };

            jcrop_api.setImage(currobj.url+"?imageMogr2/rotate/"+currobj.rotateangle+"/thumbnail/"+maxWidth+"x"+maxHeight);
            //alert($("#cropbox").width()+"|"+$("#cropbox").height())
            //jcrop_api.setSelect([0, 0, maxWidth, maxHeight]);
            SetSelectInfo();
            $("#picIndex").html((index+1)+"/"+objOrderDetails.images.length);
            $("#picnum").val(currobj.num);

        });

        var PreviousImg=function(){
            var n=getPrevious(objOrderDetails.images,serverid,index);
            if(n)
            {
                GetSelectInfo();
                currobj=n;
                jcrop_api.setImage(currobj.url+"?imageMogr2/rotate/"+currobj.rotateangle+"/thumbnail/"+maxWidth+"x"+maxHeight);
                //jcrop_api.setSelect([0, 0, maxWidth, maxHeight]);
                SetSelectInfo();
                $("#picIndex").html((index+1)+"/"+objOrderDetails.images.length);
                $("#picnum").val(currobj.num);
                serverid=n.serverid;

            }
        }

        var NextImg=function(){
            var n=getNext(objOrderDetails.images,serverid,index);
            if(n)
            {
                GetSelectInfo();
                currobj=n;
                jcrop_api.setImage(currobj.url+"?imageMogr2/rotate/"+currobj.rotateangle+"/thumbnail/"+maxWidth+"x"+maxHeight);
                //jcrop_api.setSelect([0, 0, maxWidth, maxHeight]);
                SetSelectInfo();
                $("#picIndex").html((index+1)+"/"+objOrderDetails.images.length);
                $("#picnum").val(currobj.num);
                serverid=n.serverid;

            }
        }

        //获取选框信息
        var GetSelectInfo=function()
        {
            ///设置图片的选框大小和显示缩略图大小
            var bounds=jcrop_api.getBounds();
            var select=jcrop_api.tellSelect();
            currobj.WidgetWidth=bounds[0];
            currobj.WidgetHeight=bounds[1];
            currobj.BeginX=select.x;
            currobj.BeginY=select.y;
            currobj.EndX=select.x2;
            currobj.EndY=select.y2;
        }

        //设置选框
        var SetSelectInfo=function(){
            if(currobj)
            {
                if(currobj.EndX!=0 && currobj.EndY!=0 )
                    jcrop_api.setSelect([currobj.BeginX,currobj.BeginY,currobj.EndX,currobj.EndY]);
                else
                    jcrop_api.setSelect([0, 0, maxWidth, maxHeight]);
            }
        }

        var Rotate=function(){
            rotate=rotate+90;
            rotate=rotate%360;//取模
            currobj.rotateangle=rotate;
            jcrop_api.setImage(currobj.url+"?imageMogr2/rotate/"+rotate+"/thumbnail/"+maxWidth+"x"+maxHeight);
            jcrop_api.setSelect([0, 0, maxWidth, maxHeight]);
        }

        var Back=function(){//返回时提交刚刚客户操作到服务器缓存
            //设置最后一张图片的选框位置
            GetSelectInfo();

            //检查设置的数量是否操作了最大限额
            if(objOrderDetails.images.length>0)
            {
                var tempnum=0;
                for(var i=0;i<objOrderDetails.images.length;i++)
                {
                    tempnum=tempnum+objOrderDetails.images[i].num;
                }
                if(tempnum>objOrderDetails.num)
                {
                    $('#dialog2').show().on('click', '.weui_btn_dialog', function () {
                        $('#dialog2').off('click').hide();
                    });
                    return;
                }
                else
                {
                    var mobile = getUrlParam("m");
                    var oid = getUrlParam("oid");
                    objOrderDetails.uploadnum=tempnum;
                    //提交服务器
                    $.ajax({
                        type: "post",
                        url: "./SumbitOrder?m=" + mobile + "&oid=" + oid,
                        async:false,
                        data:JSON.stringify(objOrderDetails),
                        datatype: "json",
                        success: function (data) {
                            location.href="./OrderListPage?m=" + mobile;
                        }
                    });
                }
            }
            //var oid = getUrlParam("oid");
            //var mobile = getUrlParam("m");
            //location.href="./PhotoListPage?m="+mobile+"&oid="+oid;
        }

        var setImgSelect=function() {
            jcrop_api.animateTo([105, 105, 250, 470]);
        }

        ///单张留白
        var SingleLiuBai=function(){
            currobj.sellerCut=false;
            currobj.IsCut=false;
            jcrop_api.release();
        }

        //单张裁剪
        var SingleCut=function(){
            currobj.sellerCut=false;
            currobj.IsCut=true;
            jcrop_api.setSelect([0, 0, maxWidth, maxHeight]);
        }
        //单张删除
        var SingleDel=function(){
            objOrderDetails.images.splice(index, 1);
            if(objOrderDetails.images.length>0)
            {
                if(index>=objOrderDetails.images.length)
                    index=objOrderDetails.images.length-1;
                //设置当前对象
                currobj= findByIndex(objOrderDetails.images,index);
                jcrop_api.setImage(currobj.url+"?imageMogr2/thumbnail/"+maxWidth+"x"+maxHeight);
                jcrop_api.setSelect([0, 0, maxWidth, maxHeight]);
                $("#picIndex").html((index+1)+"/"+objOrderDetails.images.length);
                serverid=currobj.serverid;
            }
            else
            {
                var mobile = getUrlParam("m");
                var oid = getUrlParam("oid");
                location.href="./PhotoListPage?m="+mobile+"&oid="+oid;
            }
        }

        //份数设定
        var PicNumChange=function(){
            currobj.num=$("#picnum").val();
        }
    </script>
}
<div class="bd">
    <div class="navbar">
        <div class="bd" style="height: 100%;">
            <div class="weui_tab">
                <div class="weui_navbar">
                    <div class="weui_navbar_item" onclick="PreviousImg();">
                        上一张
                    </div>
                    <div class="weui_navbar_item" onclick="SingleLiuBai();">
                        留白
                    </div>
                    <div class="weui_navbar_item" onclick="SingleCut();">
                        裁剪
                    </div>
                    <div class="weui_navbar_item" onclick="NextImg();">
                        下一张
                    </div>
                </div>
                <div class="weui_tab_bd">
                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="weui_uploader">
                            <div class="weui_uploader_bd img100" id="cropboxdiv" style="margin-left: auto; margin-right: auto;">
                                <img id="cropbox" style="clear: both; display: block; margin: auto;" src="http://7xj84r.com2.z0.glb.qiniucdn.com/062bffe918ce4f218ac6c5793ef89ee0.jpg?imageMogr2/thumbnail/300x400" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui_tabbar">
        <div class="weui_navbar_item" onclick="Back();">
            确定
        </div>
        <div class="weui_navbar_item" onclick="PreviousImg();">
            <input class="weui_input" type="number" id="picnum" pattern="[0-9]*" value="1" placeholder="份数" onchange="PicNumChange();">
            @*value="weui input error"*@
        </div>
        <div id="picIndex" class="weui_navbar_item">
            12/67
        </div>

        <div class="weui_navbar_item" id="divRotate" onclick="Rotate();">
            旋转
        </div>
        <div class="weui_navbar_item" onclick="SingleDel();">
            删除
        </div>
    </div>
</div>
<!--BEGIN dialog2-->
<div class="weui_dialog_alert" id="dialog2" style="display: none; position: relative; z-index: 99999;">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong class="weui_dialog_title">系统提示</strong></div>
        <div class="weui_dialog_bd">照片总数量超出了订单数量,请您确认照片份数后继续操作</div>
        <div class="weui_dialog_ft">
            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
        </div>
    </div>
</div>
<!--END dialog2-->
